<template>
  <div>
    <el-tabs
      v-model="activeTab"
      class="tabs"
      @tab-click="handleClick"
    >
      <el-tab-pane
        label="上架短剧"
        name="up"
      ></el-tab-pane>
      <el-tab-pane
        label="下架短剧"
        name="down"
      ></el-tab-pane>
    </el-tabs>
    <div
      v-if="activeTab=='down'"
      class="content"
    >
      <div class="search rowFlex columnCenter">
        <label>请选择状态</label>
        <el-select
          v-model="status"
          placeholder="请选择状态"
          clearable
          @change="requestDataList"
        >
          <el-option
            v-for="item in options"
            :key="item.label"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
      <div class="table">
        <BiTable
          ref="table"
          :data="tableData"
          size="medium"
          :column="tableColums"
          fixed="sticky"
          fixed-offset="50"
          @selection-change="handleSelectionChange"
        >
        </BiTable>
      </div>
      <el-button
        v-if="status!=0"
        :loading="loading"
        type="primary"
        class="downVideo"
        :disabled="miniappList.length==0 || status==0"
        @click="offlinePlayLet"
      >一键下架</el-button>
    </div>
    <div v-if="activeTab=='up'">
      <listing
        :row-info="rowInfo"
        @cancel="close"
      />
    </div>
  </div>
</template>

<script>
import { miniAppListContent, offlinePlayLet } from '@/api/content'
import listing from './listing.vue'
export default {
  components: {
    listing
  },
  props: {
    rowInfo: {
      require: true,
      type: Object
    }
  },
  data() {
    return {
      activeTab: 'up',
      options: [
        {
          label: '已下架',
          value: 0
        },
        {
          label: '已上架',
          value: 1
        }
      ],
      miniappList: [],
      status: 1,
      tableData: [],
      tableColums: [
        { label: '选择', prop: 'selection', type: 'selection' },
        {
          label: '小程序名称',
          prop: 'name'
        },
        {
          label: '上架状态',
          prop: 'status',
          render: (h, { row }) => {
            if (row.status == 1) {
              return <p>已上架</p>
            } else if (row.status == 0) {
              return <p>已下架</p>
            } else {
              return <span></span>
            }
          }
        }
      ]
    }
  },
  mounted() {
    this.requestDataList()
  },
  methods: {
    handleClick() {},
    handleSelectionChange(val) {
      this.miniappList = val
    },
    requestDataList() {
      const data = {
        playlet_id: this.rowInfo.id,
        status: this.status
      }
      miniAppListContent(data).then((res) => {
        if (res.status_code === 1) {
          this.tableData = res.data
        }
      })
    },
    offlinePlayLet() {
      if (this.miniappList.length === 0) {
        this.$message.warning('请选择要下架的小程序')
        return false
      }
      const list = this.miniappList.filter((item) => item.status == 1)
      if (list.length === 0) {
        this.$message.warning('所选中的已经下架')
        return
      }
      const appList = list.map((item) => {
        return { mini_app_id: item.mini_app_id }
      })
      const data = {
        playlet_id: this.rowInfo.id,
        target_config: appList
      }
      this.loading = true
      offlinePlayLet(data).then((res) => {
        if (res.status_code === 1) {
          this.$message.success(res.msg)
          this.$emit('ok')
          this.requestDataList()
        } else if (res.status_code == '41001') {
          this.$confirm(`该剧已添加运营任务，请在运营管理->任务签到->任务列表中，先关闭任务后，再下架短剧`, '提示', {
            confirmButtonText: '确定',
            type: 'warning'
          }).then((res) => {})
        } else if (res.status_code == 0) {
          this.$message.success('下架成功')
        } else {
          this.$message.error(res.msg)
        }
        this.close()
      })
      this.loading = false
    },
    close() {
      this.$emit('cancel')
    },
    submit() {
      this.$emit('ok')
    }
  }
}
</script>
<style lang="scss" scoped>
.content {
  width: 686px;
  padding: 20px;
}
.search {
  margin-bottom: 20px;
  label {
    margin-right: 10px;
    font-weight: 400;
  }
}
.downVideo {
  float: right;
  margin-top: 20px;
}
.tabs {
  padding: 20px;
  padding-bottom: 0;
}
.button {
  margin-bottom: 20px;
}
</style>